<template>
	<view class="container pad-left-right-30">
		<scroll-view scroll-y class="scroll-y">
			<up-radio-group v-model="addressId" placement="column" @change="hanldeChange">
				<view v-for="(item, index) in addressList" :key="item.id" @click="hanldeChange(item.id)">
					<view class="centerY pad-24 bg-white radius16 mar-bottom-24">
						<view class="shrink">
							<up-radio :customStyle="{marginBottom: '8px'}" :name="item.id" />
						</view>
						<view class="mar-left-20">
							<view class="color-text font-30">
								{{item.province}}{{item.city}}{{item.region}}{{item.street}}{{item.detail}}
							</view>
							<view class="color-646464 font-26 mar-top-20">联系电话:{{item.tel}}</view>
						</view>
					</view>
				</view>
			</up-radio-group>
			<u-empty v-if="addressList.length == 0" width="80" height="80" text="没有收货地址"
				icon="/static/image/coupon-none.png"></u-empty>
		</scroll-view>
		<view class="betweenX button-bottom centerXY">
			<view @click="hanldeAddedit" class="btn">新增</view>
			<view @click="hanldeNext" class="btn mar-left-20 button-style">{{rightButtonText}}</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		defineEmits,
		onMounted
	} from 'vue';
	import {
		getAddressAll
	} from '@/api/index.js'

	import {
		onShow
	} from '@dcloudio/uni-app'

	// 接收参数
	const props = defineProps({
		rightButtonText: {
			type: String,
			default: '下一步'
		},
	})

	const emits = defineEmits(['hanldeNext']);

	// 选中的地址id
	const addressInfo = ref({});
	const addressId = ref('');
	// 点击文字选中地址
	const hanldeChange = (id) => {
		addressId.value = id;
		addressInfo.value = addressList.value.find(i => i.id == id);
	}

	// 新增地址
	const hanldeAddedit = () => {
		uni.navigateTo({
			url: '/pages/address/edit'
		})
	}

	// 下一步选工人
	const hanldeNext = () => {
		if (addressInfo.value.id == undefined || addressInfo.value.id == null) {
			uni.$u.toast('请先选择地址');
			return
		}
		emits('hanldeNext', addressInfo.value);
		uni.setStorageSync('addressId', addressInfo.value.id);
	}

	// 获取地址
	const addressList = ref([]);
	const getUserAddressList = () => {
		getAddressAll().then(res => {
			if (res?.code == 200) {
				addressList.value = res?.data?.lists;
			}
		})
	}

	// 初始化 
	onShow(() => {
		getUserAddressList();
	})
</script>

<style scoped lang="scss">
	.container {
		height: 70vh;
		overflow-y: scroll;
		padding-bottom: 180rpx;

		.scroll-y {
			height: calc(70vh - 180rpx);
		}

		.buttom {
			border-top: 2rpx solid #f2f2f2;
			margin-top: 24rpx;
		}

		.checkbox-border {
			border: 2rpx solid rgb(200, 201, 204);
			box-sizing: border-box;
			height: 32rpx;
			width: 32rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
		}


		.button-box {
			.del {
				border: 1rpx solid $uni-color-error;
				color: $uni-color-error;
				font-size: 24rpx;
				padding: 6rpx 25rpx;
				border-radius: 8rpx;
			}

			.edit {
				border: 1rpx solid $uni-color-primary;
				color: $uni-color-primary;
				font-size: 24rpx;
				padding: 6rpx 25rpx;
				border-radius: 8rpx;
			}
		}

		.button-bottom {
			width: 100%;
			padding: 35rpx 40rpx;
			box-sizing: border-box;
			background: white;
			position: fixed;
			bottom: 0rpx;
			z-index: 2;
			left: 0rpx;
		}

		.btn {
			width: 100%;
			height: 100rpx;
			border-radius: 50rpx;
			border: 2rpx solid #C1C1C1;
			line-height: 100rpx;
			text-align: center;
		}

	}

	.button-bottom {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		background: white;
		position: fixed;
		bottom: 100rpx;
		z-index: 2;
	}

	.btn {
		width: 200rpx;
		height: 80rpx;
		border-radius: 50rpx;
		border: 2rpx solid #C1C1C1;
		line-height: 80rpx;
		text-align: center;
	}
</style>